<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <style>
        table{
            margin-top: 500px;
        }
    </style>

</head>

<body>
    <div class="bbs">
        <header onclick="open()" id="first"><span>我要发帖</span></header>
        <section>
            <ul id="postList"></ul>
        </section>
        <div class="post" id="post">
            <input class="title" placeholder="请输入标题（1-50个字符）" id="title">
            所属版块：<select id="sec">
                <option>请选择版块</option>
                <option>电子书籍</option>
                <option>新课来了</option>
                <option>新手报到</option>
                <option>职业规划</option>
            </select>
            <textarea class="content" id="content"></textarea>
            <input class="btn" value="发布" onclick="create()">
        </div>

        <div>
            <table class="table table-striped" id="table">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>所属板块</th>
                        <th>内容</th>
                    </tr>
                </thead>
                <tbody id="tableData">
                    
                </tbody>
            </table>
        </div>
    </div>
    

    <script>
        var first = document.getElementById('first');
        first.onclick = function () {
            document.getElementById('post').style.display = "block";
        }

        function create() {
            var title = document.getElementById("title").value;
            var sec = document.getElementById("sec").value;
            var content = document.getElementById('content').value;
            var nodeHtml = `
         <td>${title}</td>
         <td>${sec}</td>
         <td>${content}</td>
      `;
            var tr = document.createElement("tr");
            tr.innerHTML = nodeHtml;
            document.getElementById("tableData").appendChild(tr)

        }
    </script>
</body>

</html>